<template>
    <div class="btn" :class="`btn_${type}`">
        <p>按钮</p>
    </div>
</template>
<script>
import { toRefs } from 'vue';
export default {
    props: {
        type: {
            type: String || Number,
            default: 'default',
            // option: '[default(0),primary(1),error(2)]',
        },
    },
    setup(props, context) {
        const { type } = toRefs(props);
        console.log(type);
        return { type };
    },
};
</script>
<style lang="less">
/*  BUTTONS  */
.btn {
    width: 15rem;
    height: 4rem;
    border-radius: 1rem;
    box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease;
}

.btn_primary {
    background: #2ebb96;
    box-shadow: inset 0.2rem 0.2rem 1rem #8abdff, inset -0.2rem -0.2rem 1rem #238067, 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff;
    color: #e4ebf5;
}

.btn_primary:hover {
    color: #fff;
}

.btn_primary:active {
    box-shadow: inset 0.2rem 0.2rem 1rem #238067, inset -0.2rem -0.2rem 1rem #8abdff;
}

.btn_default {
    // grid-column: 1/2;
    // grid-row: 5/6;
    color: #9baacf;
}

.btn_default:hover {
    color: #2ebb96;
}

.btn_default:active {
    box-shadow: inset 0.2rem 0.2rem 1rem #c8d0e7, inset -0.2rem -0.2rem 1rem #fff;
}

.btn_circle {
    width: 6rem;
    height: 6rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2ebb96;
    background: #e4ebf5;
    box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff;
    position: relative;
}

.btn_circle:active {
    box-shadow: inset 0.2rem 0.2rem 1rem #c8d0e7, inset -0.2rem -0.2rem 1rem #fff;
}

.btn p {
    font-size: 1.6rem;
    user-select: none;
}
</style>
